
<template>
    <!-- 店铺面板(员工标表现) -->
	<view class="staff-wrap">
		<view class="staff-top">
            <view class="staff-top-left">{{shopName}}</view>
            <view class="staff-top-tit">员工表现</view>
        </view>
        <view class="staff-sales" @click="toNextPage({url:'/pagesshop/staff/salesperformance'})">
            <view class="staff-sales-content">
                <view class="flex justify-between items-center">
                    <view class="staff-sales-tit">销售表现</view>
                    <image class="chevronright" :src="IMG_URL2+'common/chevron-right.svg'"></image>
                </view>
                <view class="staff-sales-items">
                    <view class="sitem" v-for="(item,index) in salesListInfo" :key="index">
                        <view class="sitem-tit">{{ item.name }}</view>
                        <view class="sitem-nums">{{ item.value }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="staff-sales" @click="toNextPage({url:'/pagesshop/staff/studyperformance'})">
            <view class="staff-sales-content">
                <view class="flex justify-between items-center">
                    <view class="staff-sales-tit">学习表现</view>
                    <image class="chevronright" :src="IMG_URL2+'common/chevron-right.svg'" ></image>
                </view>
                <view class="staff-sales-items">
                    <view class="sitem" v-for="(item,index) in studyListInfo" :key="index">
                        <view class="sitem-tit">{{ item.name}}</view>
                        <view class="sitem-nums">{{item.value}}</view>
                    </view>
                </view>
            </view>
        </view>
	</view>
</template>

<script setup>
import { IMG_URL2 } from "@/config";
import { shopApi,studyApi } from "@/api";
let shopName =ref('')
let salesListInfo = ref([{
    name:'销售额',
    value:''
},{
    name:'成交单数',
    value:''
},{
    name:'成交件数',
    value:''
}])
let studyListInfo = ref([{
    name:'参与培训比例',
    value:''
},{
    name:'员工考试通过率',
    value:''
}])
onLoad(async () => {
    studyApi.STUDYGETTOTALWATCHDATA().then((res) => {
        if (res.code == 200) {
            studyListInfo.value[0].value = Number(res.result.hadStudyPercent)+'%';
            studyListInfo.value[1].value = Number(res.result.passPercent)+'%';
        } else {
            uni.showToast({ title: res.errMsg, icon: "none" });
        }

    })

    shopApi.SHOPGETINDEXSALESDATA().then((res) => {
    if (res.code == 200) {
      setTimeout(() => {
        salesListInfo.value[0].value = res.result.salesAmount?`¥${res.result.salesAmount}`:'-' //销售金额
        salesListInfo.value[1].value = res.result.orderCount?res.result.orderCount:'-' //成交单数
        salesListInfo.value[2].value = res.result.productCount?res.result.productCount:'-' //成交单数

      }, 800)
    } else {
      uni.showToast({
        title: res.errMsg,
        icon: "success"
      });
    }
  });

    shopApi.SHOPGETCURRENTSHOPINFO().then((res) => {
        if(res.code==200){
            shopName.value = res.result.name
        }else{
      uni.showToast({
          title: res.errMsg,
          icon: "success",
      });
  }
    })

    
});
const toNextPage = (item) => {
    if (item.url) {
        uni.navigateTo({
            url: item.url
        });
    }
}; 
</script>
<style lang="scss">
page {
    background-color: #f3f3f3;
}
</style>
<style lang="scss" scoped>
.staff-wrap {
	.staff-top{
        background-color: #fff;
        padding: 24rpx;
        box-sizing: border-box;
        margin-bottom: 12rpx;
        .staff-top-left{
            font-family: PingFang SC;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            text-align: left;
            color:rgba(0, 0, 0, 0.6);
            margin-bottom: 30rpx;
        }
        .staff-top-tit{
            font-family: PingFang SC;
            font-size: 18px;
            font-weight: 400;
            line-height: 26px;
            text-align: left;
            color:rgba(0, 0, 0, 0.9)
        }
    }
    .staff-sales{
        padding: 24rpx;
        box-sizing: border-box;
        .staff-sales-content{
            background-color: #fff;
            padding: 24rpx;
            box-sizing: border-box;
            border-radius: 16rpx;
        }
        .chevronright{
            width: 32rpx;
			height: 32rpx;
        }
        .staff-sales-tit{
            font-family: PingFang SC;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            text-align: left;
            color: #000000;
            margin-bottom: 12rpx;
        }
        .staff-sales-items{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24rpx;
            box-sizing: border-box;
            .sitem{
                font-family: PingFang SC;
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
                text-align: center;
                color: #000000;
                .sitem-tit{
                    font-family: PingFang SC;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 22px;
                    text-align: center;
                    color: rgba(0, 0, 0, 0.6);
                    margin-bottom: 24rpx;
                }
                .sitem-nums{
                    font-family: PingFang SC;
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 24px;
                    text-align: center;
                    color: rgba(0, 0, 0, 0.9);

                }
            }
        }
    }
}
</style>
